﻿@model IndignadoFramework.BackOffice.Models.MovimientoModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Movimiento";
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/CategoriasTematicas.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/OrigenesDeDatos.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/SubirImagenesMovimiento.js")"></script>
<script type="text/javascript">
    var fing = new google.maps.LatLng(-34.919022724095015, -56.16678233238224);
    var marker;
    var map;
    var geocoder;

    window.onload = function (e) {
        var mapOptions = {
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: fing
        };
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);

        marker = new google.maps.Marker({
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP,
            position: fing
        });

        document.getElementById("punto1").value = fing.lat();
        document.getElementById("punto2").value = fing.lng();

        google.maps.event.addListener(map, 'click', function (event) {
            var newLatLng = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
            marker.setPosition(newLatLng);
            map.panTo(newLatLng);
            document.getElementById("punto1").value = event.latLng.lat();
            document.getElementById("punto2").value = event.latLng.lng();
        });

        google.maps.event.addListener(marker, 'mouseup', function (event) {
            document.getElementById("punto1").value = event.latLng.lat();
            document.getElementById("punto2").value = event.latLng.lng();
            map.panTo(event.latLng);
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
    }

    function codeAddress() {
        var address = document.getElementById("address").value;
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var newLatLng = results[0].geometry.location;
                marker.setPosition(newLatLng);
                document.getElementById("punto1").value = newLatLng.lat();
                document.getElementById("punto2").value = newLatLng.lng();
            } else {
                alert("No se ha encontrado la dirección");
            }
        });
    }
</script>
<script type="text/javascript">
    function confirmAction() {
        var confirmed = alert("Gracias");
        return confirmed;
    }
</script>
<h2 id="titulo">
    Crear Nuevo Movimiento
</h2>
<div id="contenedorPrincipalMovimiento">
    @using (Html.BeginForm("NuevoMovimiento", "Movimiento", FormMethod.Post, new { enctype = "multipart/form-data", id = "movimiento" }))
    {

        <div id="movymapa">
            <h2>Información General</h2>
            <div id="contenedorMovimiento">
                <fieldset id="inputs">
                    <label for="nombre-movimiento">
                        Nombre:</label>
                    <input type="text" name="MovimientoNombre" size="1" placeholder="Nombre del movimiento" />
                    <br />
                    <input id="punto1" type="hidden" name="MovimientoUbicacionX" value="0" />
                    <input id="punto2" type="hidden" name="MovimientoUbicacionY" value="0" />
                    <label for="descripcion">
                        Descripcion:</label>
                    <input type="text" name="MovimientoDescripcion" placeholder="Describa el movimiento" />
                    <br />
                    <label for="descripcion">
                        Logo:</label>
                    <input name="MovimientoLogo" type="file" accept="image/*" />
                    <br />
                    <label for="descripcion">
                        Estilo CSS:</label>
                    <input id="inputs" name="MovimientoEstiloCSS" type="file" accept="text/css" />
                    <br />
                    <label for="constante-M">
                        Constante M:</label>
                    <input type="number" name="MovimientoConstM" value="0" min="0" />
                    <br />
                    <label for="constante-N">
                        Constante N:</label>
                    <input type="number" name="MovimientoConstN" value="0" min="0" />
                    <br />
                    <label for="constante-X">
                        Constante X:</label>
                    <input type="number" name="MovimientoConstX" value="0" min="0" />
                    <br />
                    <label for="constante-Z">
                        Constante Z:</label>
                    <input type="number" name="MovimientoConstZ" value="0" min="0" />
                    <br />
                    @Html.LabelFor(model => model.MovimientoHost)
                    @Html.TextBoxFor((model => model.MovimientoHost), new { @placeholder = "Host", @id = "host" })
                    .happyclone.com
                    @Html.ValidationMessageFor((model => model.MovimientoHost))
                    <br />
                </fieldset>
            </div>
            <div id="contenedorMapa">
                <div id="busquedamapa">
                    Dirección:
                    <input id="address" type="text" value="">
                    <input type="button" value="Buscar" onclick="codeAddress()">
                </div>
                <div id="map_canvas">
                    map div</div>
            </div>
        </div>
	
        <div id="categoriaTematica">
            <input id="cantidadCategoriaTematica" type="hidden" name="cantidadCategoriaTematica"
                value="0">
            <h2>
                Categoría Temática</h2>
            <input type="button" value="Agregar Categoría Temática" onclick="crearCategoria(this)">
            <div id="inputsCategoria">
            </div>
        </div>

        <div id="galeriaimagenes">
            <input id="cantidadimagenes" type="hidden" name="cantidadimagenes" value="0">
            <h2>
                Galería de Imagenes</h2>
            <input type="button" value="Agregar Imagen" onclick="crear(this)">
            <div id="inputsImagenes">
            </div>
        </div>
	
        <div id="contenedorOrigenesDeDatos">
            <input id="cantidadOrigenes" type="hidden" name="cantidadOrigenes" value="0">
            <h2>
                Origenes de Datos</h2>
            <input type="button" value="Agregar Origen de Dato" onclick="crearOrigen(this)">
            <div id="listaOrigenes">
            </div>
        </div>
     
        <div id="submitMovimiento">
            <input id="submit" type="submit" value="Confirmar" />
        </div>
    }
</div>
